<template>
    <div>
    <div><Top /></div>
    <div class="zhuyao">
      <div class="mian">
        <div class="clas"><Classtop @select-week="handleSelectWeek" /></div>
        <div class="classm"><classmian :selectedWeek="selectedWeek" /></div>
      </div>
      <div class="daoshuri"><Daoshuri></Daoshuri></div>
      <div class="xian"></div>
      <div class="daiban"><Daiban></Daiban></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Top from '@/components/top/top.vue'
import Classtop from '@/pages/home/components/classtop.vue'
import classmian from '@/pages/home/components/classmian.vue';
import Daoshuri from '@/pages/home/components/doashuri/index.vue';
import Daiban from '@/pages/home/components/daiban/index.vue'
import { ref } from 'vue';
const selectedWeek = ref(1); // 默认选中第一周

const handleSelectWeek = (weekIndex: number) => {
  selectedWeek.value = weekIndex;
};

</script>

<style scoped lang="scss">

.zhuyao{  
    height: 1024px;
    display: flex;
    justify-content: center;
    background: linear-gradient(-179.65deg, #FEFEFF 0%, #8ABDF5 100%);
    .mian{
        display: flex;
        flex-direction: column;
        margin-right: 14px;
        .clas{
            margin-bottom: 11px;
        }
        .classm{
            width: 616px;
            max-height: 691.68px!important;
        }
    }
    .xian{
        background: #e5edfa;
        width: 5px;
        height: 841px;
        margin: 118px 20px 0px 20px;
    }
    
}
</style>